<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			body {
				background-color: whitesmoke;
				
			}
			
			.top {
				width: 300px;
				height: 500px;
				background: white;
				margin-left: 40%;
				margin-top: 20px;
				border-radius: 20px;
				font-size: 18px;
				box-shadow: 5px 5px 15px 5px rgba(0,0,0,.3);
			}
			
			.top .top1 {
				float: left;
				margin-top: 15px;
				margin-left: 15px;
				color: darkgrey;
			}
			
			.top2 {
				display: block;
				height: 400px;
				width: 280px;
				margin-top: 20px;
				overflow: hidden;
				float: left;
				margin-left: 10px;
				padding-top: 40px;
				
			}
			
			.top2 button {
				color: cornflowerblue;
				margin-left: 5px;
				width: 60px;
				height: 60px;
				background-color: whitesmoke;
				outline: none;
				border: none;
				margin-top: 5px;
				border-radius: 10px;
				cursor: pointer;
			}
			
			.top button:active {
				background-color: lightgrey;
			}
			
			.top2 .top2-1 {
				background-color: lightskyblue;
				display: block;
				margin-top: -125px;
				margin-left: 215px;
				height: 125px;
				color: white;
			}
			
			.top2 .top2-1:active {
				background-color: cornflowerblue;
			}
			
			.top3 #inp {
				width: 270px;
				height: 40px;
				outline: none;
				margin-bottom: 20px;
				border: none;
				margin-left: 5px;
				background-color: whitesmoke;
				border-radius: 10px;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<div class="top1">
				计算器
			</div>

			<div class="top2">
				<div class="top3">
					<input type="text" id="inp" disabled="disabled" />
					<!--不能输入-->
				</div>
				<button onclick="cls()">c</button>
				<button onclick="addStr('*')">x</button>
				<button onclick="addStr('/')">÷</button>
				<button onclick="back()">←</button>
				<button onclick="addStr(7)">7</button>
				<button onclick="addStr(8)">8</button>
				<button onclick="addStr(9)">9</button>
				<button onclick="addStr('-')">-</button>
				<button onclick="addStr(4)">4</button>
				<button onclick="addStr(5)">5</button>
				<button onclick="addStr(6)">6</button>
				<button onclick="addStr('+')">+</button>
				<button onclick="addStr(1)">1</button>
				<button onclick="addStr(2)">2</button>
				<button onclick="addStr(3)">3</button><br>
				<button onclick="addStr('^')">%</button>
				<button onclick="addStr(0)">0</button>
				<button onclick="addStr('.')">.</button>
				<button class="top2-1" onclick="cala()">=</button>

			</div>

		</div>
		<script>
			function addStr(s) {
				var inp = document.getElementById("inp");
				inp.value = inp.value + s;
				//inp现在的值=原来的值+s
			}
            
			function cala() {
				var inp = document.getElementById("inp");
				//				文本框的值赋值给val
				val = eval(inp.value);
				inp.value = val;
				
				//				重新赋值
			}

			function cls() {
				var inp = document.getElementById("inp");
				inp.value = "";
				//				设置为空
			}
			//推格删除最后一个字符
			function back() {
				var inp = document.getElementById("inp");
				var str = inp.value.substr(0, inp.value.length - 1);
				//				length长度
				inp.value = str;
			}
		</script>
	</body>

</html>